import React from 'react';

var styles = {
  'title': {
    width: 200,
    display: 'inline-block',
    marginRight: 10,
    verticalAlign: 'top'
  }
}

class AppForm extends React.Component {
    handleSubmit = (event) => {
        event.preventDefault()
        let text = this.refs.text.value

        if(!text.trim()){
            alert("Input can't be null");
            return
        }

        let id = this.uuid();
        this.props.AddTodoItem({id,text,complete:false});
    }

    uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";
     
        var uuid = s.join("");
        return uuid;
    }

    render () {
        return (
        <form className='ui reply form' onSubmit={this.handleSubmit}>
            <div className='field' style={styles.title}>
            <input type='text' placeholder='TODO' ref='text' />
            </div>

            <button type='submit' className='ui blue button'>
                添加
            </button>
        </form>
        )
    }
}

export default AppForm;